<template>
  <view class="register-container">
    <!-- 顶部装饰元素 -->
    <view class="decor-top"></view>
    
    <!-- 注册表单 -->
    <view class="register-form">
      <!-- 标题 -->
      <view class="form-header">
        <text class="title">加入中博纳油耗</text>
        <text class="subtitle">开启您的爱车油耗管理之旅</text>
      </view>
      
      <!-- 用户名输入 -->
      <view class="input-group">
        <uni-icons type="person" size="20" color="#7fbc8d"></uni-icons>
        <input 
          v-model="form.username" 
          placeholder="请输入用户名" 
          class="input"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 密码输入 -->
      <view class="input-group">
        <uni-icons type="locked" size="20" color="#7fbc8d"></uni-icons>
        <input 
          v-model="form.password" 
          placeholder="请输入密码" 
          password
          class="input"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 昵称输入 -->
      <view class="input-group">
        <uni-icons type="contact" size="20" color="#7fbc8d"></uni-icons>
        <input 
          v-model="form.nickname" 
          placeholder="请输入昵称" 
          class="input"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 注册按钮 -->
      <button 
        @click="handleRegister" 
        :class="['register-btn', isFormValid ? 'active' : 'disabled']"
        :disabled="!isFormValid"
      >
        立即注册
      </button>
      
      <!-- 已有账号登录 -->
      <view class="login-link">
        <text>已有账号？</text>
        <text @click="goToLogin" class="link-text">去登录</text>
      </view>
    </view>
    
    <!-- 底部装饰元素 -->
    <view class="decor-bottom"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        nickname: ''
      }
    }
  },
  computed: {
    isFormValid() {
      return this.form.username && this.form.password && this.form.nickname
    }
  },
  methods: {
    async handleRegister() {
      if (!this.isFormValid) return
      
      try {
        uni.showLoading({
          title: '注册中...',
          mask: true
        })
        
        // 调用注册接口
        const res = await this.$api.register({
          username: this.form.username,
          password: this.form.password,
          nickname: this.form.nickname
        })
        
        uni.hideLoading()
		console.log("----",res)
		if (res.code == 200){
			uni.showToast({
			  title: '注册成功',
			  icon: 'success'
			})
			// 注册成功后自动跳转到登录页
			setTimeout(() => {
			  uni.redirectTo({
			    url: '/pages/login/index'
			  })
			}, 1500)
		}else{
			uni.showToast({
			  title: res.message || '注册失败',
			  icon: 'none'
			})
		}
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '注册失败',
          icon: 'none'
        })
      }
    },
    
    goToLogin() {
      uni.redirectTo({
        url: '/pages/login/index'
      })
    }
  }
}
</script>

<style lang="scss">
.register-container {
  height: 100vh;
  background-color: #f8fffa;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.decor-top {
  position: absolute;
  top: -150rpx;
  right: -150rpx;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background-color: rgba(127, 188, 141, 0.15);
}

.decor-bottom {
  position: absolute;
  bottom: -100rpx;
  left: -100rpx;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background-color: rgba(127, 188, 141, 0.1);
}

.register-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60rpx;
  z-index: 1;
}

.form-header {
  margin-bottom: 80rpx;
  text-align: center;
}

.title {
  display: block;
  font-size: 44rpx;
  font-weight: bold;
  color: #4a8d5b;
  margin-bottom: 16rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #7fbc8d;
}

.input-group {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #e0f0e5;
  margin-bottom: 40rpx;
  
  .input {
    flex: 1;
    height: 60rpx;
    margin-left: 20rpx;
    font-size: 30rpx;
    color: #4a8d5b;
  }
  
  .placeholder {
    color: #b8d9c2;
    font-size: 30rpx;
  }
}

.register-btn {
  margin-top: 80rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  color: white;
  background-color: #b8d9c2;
  border: none;
  transition: all 0.3s;
  
  &.active {
    background-color: #7fbc8d;
    box-shadow: 0 4rpx 12rpx rgba(127, 188, 141, 0.3);
  }
  
  &.disabled {
    opacity: 0.7;
  }
}

.login-link {
  text-align: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #999;
  
  .link-text {
    color: #7fbc8d;
    margin-left: 10rpx;
  }
}

/* 禁止页面滚动 */
.register-container {
  height: 100vh;
  overflow: hidden; /* 关键修复 */
}

/* 确保表单容器不超出屏幕 */
// .register-form {
//   height: calc(100vh - 40rpx); /* 根据实际调整 */
//   overflow-y: auto; /* 如果内容确实很长，允许表单内部滚动 */
// }

.decor-top, .decor-bottom {
  position: absolute;
  z-index: 0; /* 确保在底层 */
}
</style>